<template>
  <view :class="theme">
    <view class="m-30 b-rounded-30 overflow-hidden" style="box-shadow: 0 0rpx 10rpx 0 rgba(0,0,0,0.1);">
      <view class="flex-row items-center bg-4 text-28" style="padding: 50rpx 30rpx;">
        <label style="width: 150rpx;">头像</label>
        <view @click="chooseImage" class="flex-1 h-full justify-end items-center flex-row">
          <view class="mr-12">
            <uv-avatar size="90" :src="temp_avatar || userInfo.avatar" />
          </view>
          <uv-icon name="arrow-right" color="#999" size="28" />
        </view>
      </view>
      <view class="mt-2 flex-row items-center bg-4 text-28">
        <label style="width: 150rpx;" class="ml-36 text-28">昵称</label>
        <input v-model="userInfo.nickname" length="12" class="text-28 flex-1 h-full text-right"
          style="padding: 36rpx 74rpx 36rpx 36rpx;" type="text" placeholder="请输入昵称">
      </view>
      <view class="mt-2 flex-row items-center justify-between bg-4 text-28">
        <label style="width: 150rpx;" class="ml-36 text-28">性别</label>
        <picker @change="changeGender" :range="genderRange.slice(1)" class="flex-1 p-36 items-end">
          <view class="flex-1 flex-row items-center">
            <label class="h-full mr-20">{{ genderRange[userInfo.sex] }}</label>
            <uv-icon name="arrow-right" color="#999" size="28" />
          </view>
        </picker>
      </view>
      <view class="mt-2 flex-row items-center bg-4 text-28">
        <label style="width: 150rpx;" class="ml-36 text-28">邮箱号</label>
        <input v-model="userInfo.mobile" disabled length="12" class="text-28 flex-1 h-full text-right"
          style="padding: 36rpx 74rpx 36rpx 36rpx;" type="text" placeholder="加载中...">
      </view>
      <view class="mt-2 flex-row items-center bg-4 text-28">
        <label style="width: 150rpx;" class="ml-36 text-28">微信号</label>
        <input v-model="userInfo.wx" length="12" class="text-28 flex-1 h-full text-right"
          style="padding: 36rpx 74rpx 36rpx 36rpx;" type="text" placeholder="请输入微信号">
      </view>
      <view class="mt-2 flex-row items-center bg-4 text-28">
        <label style="width: 150rpx;" class="ml-36 text-28">QQ号</label>
        <input v-model="userInfo.qq" length="12" class="text-28 flex-1 h-full text-right"
          style="padding: 36rpx 74rpx 36rpx 36rpx;" type="text" placeholder="请输入QQ号">
      </view>
    </view>

    <view v-if="userInfo.address_name" class="bg-4 text-28 b-rounded-16" style="margin: 30rpx; padding: 50rpx 30rpx">
      <label>用户定位：{{ userInfo.address_name }}</label>
    </view>
    <view class="m-60">
      <button @click="saveInfo" hover-class="op-[0.6]" style="margin: 30rpx 0;"
        class="bg-5 b-rounded-50 color-15 text-center">保存</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { uniNavigator } from "@/common/libs/utils";
import { onShow } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";

const { $config = {} } = getApp().globalData || {};
const { theme } = useMapState(["theme"]);

const genderRange = ["未知", "男", "女"];
const temp_avatar = ref("");
const userInfo = reactive<AnyObject>({});

onShow(() => {
  uni.showToast({ icon: "loading" });
  uni.request({
    url: $config.API_USER_INFO_GET,
    success({ data }: any) {
      Object.assign(userInfo, data, data.userData);
      uni.hideToast();
    },
  });
});

const chooseImage = () => {
  uni.chooseImage({
    count: 1,
    success(e) {
      temp_avatar.value = e.tempFilePaths[0];
    }
  })
}

const changeGender = ({ detail }: any) => {
  userInfo.sex = +detail.value + 1;
}

const saveInfo = async () => {
  if (!/^[\u4E00-\u9FA5a-zA-Z0-9]{1,12}$/.test(userInfo.nickname)) {
    uni.showToast({ title: "昵称输入不合法或超出限制", icon: "none" });
    return;
  }
  try {
    const data: AnyObject = {
      nickname: userInfo.nickname,
      sex: userInfo.sex,
      wx: userInfo.wx,
      qq: userInfo.qq,
    };
    if (temp_avatar.value) {
      uni.showToast({ icon: "loading", mask: true, title: "图片上传中...", });
      const uploadRes: any = await uni.uploadFile({
        url: $config.API_FILE_UPLOAD,
        filePath: temp_avatar.value,
        formData: { type: "", position: "avatar" },
        name: "file"
      });
      data.avatar = uploadRes.data[0];
      uni.hideToast();
    };
    uni.showToast({ icon: "loading", mask: true, title: "资料保存中...", });
    uni.request({
      url: $config.API_USER_INFO_SET, data,
      success: () => {
        uni.hideToast();
        uni.navigateBack();
      }
    });
  } catch (error) {
    uni.showToast({ icon: "none", title: "图片上传失败" })
  }
}

const download = () => {
  uniNavigator({ url: `https://system.fukangshidai.com/#/pages/common/download` });
}

</script>

<style lang="scss" scoped>
// scss
</style>